import { Row, Col } from 'antd'
import Link from 'next/link'

import SizeShower from '../../components/screen-size/index'
import CardNav from '../../components/head-nav/card'

import '../../styles/head-nav/head-nav-overlay-explore-pc.css'

/**
 * 到了md，就要切换为mobile。
 */
const HeadNavOverlayExplorePC = () => {
  const defaultSize = 5
  const xlSize = 4

  return (
    <>
      <SizeShower />
      <Row gutter={16}>
        <Col lg={{ span: defaultSize }} xl={{ span: xlSize }}>
          <CardNav />
        </Col>
        <Col lg={{ span: defaultSize }} xl={{ span: xlSize }}>
          <CardNav />
        </Col>
        <Col lg={{ span: defaultSize }} xl={{ span: xlSize }}>
          <CardNav />
        </Col>
        <Col lg={{ span: defaultSize }} xl={{ span: xlSize }}>
          <CardNav />
        </Col>
        <Col
          xs={{ span: 0 }}
          sm={{ span: 0 }}
          md={{ span: 0 }}
          lg={{ span: 0 }}
          xl={{ span: 24 - 4 * xlSize }}
        >
          <div className="links-style card-style">
            <Link href="">
              <a>Teams</a>
            </Link>
            <Link href="">
              <a>Good for sale</a>
            </Link>
            <Link href="">
              <a>Meetups</a>
            </Link>
            <Link href="">
              <a>Dribbble Shop</a>
            </Link>
            <Link href="">
              <a>About Dribbble</a>
            </Link>
            <Link href="">
              <a>Advertise</a>
            </Link>
          </div>
        </Col>
        <Col
          xs={{ span: 0 }}
          sm={{ span: 0 }}
          md={{ span: 0 }}
          lg={{ span: 24 }}
          xl={{ span: 0 }}
        >
          <div className="links-style-horizontal card-style">
            <Link href="">
              <a>Teams</a>
            </Link>
            <Link href="">
              <a>Good for sale</a>
            </Link>
            <Link href="">
              <a>Meetups</a>
            </Link>
            <Link href="">
              <a>Dribbble Shop</a>
            </Link>
            <Link href="">
              <a>About Dribbble</a>
            </Link>
            <Link href="">
              <a>Advertise</a>
            </Link>
          </div>
        </Col>
      </Row>
    </>
  )
}
export default HeadNavOverlayExplorePC
